<template>
	<el-form-item class="condition-item">
		<slot :currentItem="item" :fieldConditions="field | filterFn"></slot>
		<div class="dipalay-item" :class="!field.businessId ? 'empty' : ''">
			<!--  -->
			<template v-if="rangeValue.includes(item.filterType)">
				<range class="width-full" v-if="fieldType === 'number' || fieldType === 'autoNumber' || fieldType === 'statistics'" :value="item" :config="{ fieldFixed: 'FilterValue' }" :type="fieldType"></range>
				<datetimeWrap class="width-full" v-else-if="fieldType === 'dateTime' || fieldType === 'timeLimit'" :form="item" :value-format="field && field.dateType === 1 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'" :fields="['minFilterValue', 'maxFilterValue']" :type="field && field.dateType === 1 ? 'daterange' : 'datetimerange'" placeholder="">
				</datetimeWrap>
			</template>
			<!--  -->
			<template v-else-if="disabledValue.includes(item.filterType)">
				<el-input type="text" disabled />
			</template>
			<template v-else-if="includeInput.includes(item.filterType) && inputType.includes(fieldType)">
				<!--  -->
				<inputSelect multiple no-data-text="内容" filterable allow-create :item="item">
				</inputSelect>
			</template>
			<!--  -->
			<template v-else>
				<el-input v-if="inputType.includes(fieldType)" v-model="item.filterValue" />
				<el-input-number style="width: 100%" :value="item.filterValue === null ? undefined : item.filterValue" @input="input" v-else-if="fieldType === 'number'" :controls="false"></el-input-number>
				<datetimeFun :editable="false" :positionFixed="true" class="width-full" :key='item.filterType' :value-format="field && field.dateType === 1 ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss'" v-else-if="fieldType === 'dateTime'" v-model="filterValue" :type="field && field.dateType === 1 ? 'date' : 'datetime'" placeholder="" :quick="quick">
				</datetimeFun>
				<inputSelect v-else-if="
						fieldType === 'checkbox' ||
						(fieldType === 'radio' && includeInput.includes(item.filterType)) ||
						(fieldType === 'stepBar' && includeInput.includes(item.filterType))
					" style="width: 100%" :item="item" :optionList="field.options || []" :filterable="true" :multiple="true">
				</inputSelect>
				<el-select v-model="item.filterValue" v-else-if="fieldType === 'radio' || fieldType === 'stepBar'" style="width: 100%" :filterable="true">
					<template v-for="one in field.options">
						<el-option :key="one.key" v-if="!one.isDelete" :value="one.key + ''" :label="one.value">
						</el-option>
					</template>
				</el-select>
				<regionWrap class="width-full" v-else-if="fieldType === 'region'" :item="item">
				</regionWrap>
				<el-cascader filterable v-model="item.filterValue" v-else-if="fieldType === 'cascadeSelect'" class="width-full" :props="{ value: 'key', label: 'value', checkStrictly: true }" :options="field.cascadeOptions | filterOptions">
				</el-cascader>
				<deptSelect class="width-full" :isService="isService" :deptList="deptList" :selectMap="selectMap" v-else-if="fieldType === 'department'" v-model="item.filterValue" :isCheckbox="true" :dyanmicList="dyanmicDepList" :multiRow="true" :fieldType="fieldType">
				</deptSelect>
				<memberSelect class="width-full" v-if="fieldType === 'member'" v-model="item.filterValue" :options="workerList" :isCheckbox="true" :multiRow="true"></memberSelect>
			</template>
		</div>
		<slot name="right"></slot>
		<!-- <span class="and"></span> -->
	</el-form-item>
</template>

<script lang="ts">
import { Component, Vue, Prop, Inject } from 'vue-property-decorator';
import { filterOptions } from '@/afterSales/utils/common';
import deptSelect from '@/afterSales/views/config/serviceConfig/fieldConfig/form/widget/department/components/deptSelect.vue';
import memberSelect from '@/afterSales/views/config/serviceConfig/fieldConfig/form/widget/member/components/memberSelect.vue';
import { conditionE, filterConditon } from './filterData';
import range from '../commonForm/range/range.vue';
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore'
import datetimeWrap from '../commonForm/datetimeFn/datatimeWrap.vue';
import regionWrap from './regionWrap.vue';
import { CommonModule } from '@/store/modules/common'
import inputSelect from './inputSelect.vue';
import datetimeFun from '../commonForm/datetimeFn/datatimeFun';
// eslint-disable-next-line no-restricted-imports
import { cloneDeep } from 'lodash'
@Component({
  name: 'fieldProcess',
  components: {
    deptSelect,
    range,
    regionWrap,
    inputSelect,
    datetimeWrap,
    datetimeFun,
    memberSelect
  },
  filters: {
    filterFn (field) {
      if (!field) {
        return [];
      }
      let type = field.fieldType;
      if (field.fieldType === 'associationField') {
        type = field.sourceField.fieldType;
      }
      // 单独判断sla只有是和不是选项
      if (field.subFieldType === 'sla' && field.fieldType === 'radio') {
        return filterConditon[type + 'Filter'].filter(item => {
          return item.value === 3 || item.value === 4
        })
      } else {
        return filterConditon[type + 'Filter'] || [];
      }
    },
    filterOptions (options) {
      return filterOptions(cloneDeep(options) || [])
    }
  }
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) public nodeObject!: any;
  @Prop({ default: () => ({}) }) public echoOptionalDataMap!: any;
  @Prop({ default: () => ({}) }) public field!: any;
  @Prop({ default: () => ({}) }) public item!: any;
  @Inject({ default: false }) private quick!: string;
  private codemirrorInputType = ['text', 'richText'];
  private inputType = ['text', 'phone', 'email', 'autoNumber', 'multiText'];
  private get getPickerOptions () {
    return {};
  }

  // value
  private get rangeValue () {
    return [conditionE.inScope, conditionE.notInScope];
  }

  private get isService () {
    if (this.field.dataType === 5) {
      return true
    }
    return false
  }

  private get deptList () {
    if (this.fieldType === 'department') {
      if (this.field.dataType === 2) {
        return (CommonModule as any).publicCache.departmentTree?.tree || []
      } else if (this.field.dataType === 4) {
        return (CommonModule as any).publicCache.queueList
      } else {
        return busConfigStore.serviceList
      }
    } else {
      return []
    }
  }

  private get selectMap () {
    if (this.fieldType === 'department') {
      if (this.field.dataType === 2) {
        return (CommonModule as any).publicCache.departmentListObj
      } else if (this.field.dataType === 4) {
        return (CommonModule as any).publicCache.queueListObj
      } else {
        return busConfigStore.serviceMap
      }
    } else {
      return {}
    }
  }

  private get dyanmicDepList () {
    return []
  }

  private get filterValue () {
    return this.quick ? this.item : this.item.filterValue;
  }

  private set filterValue (val) {
    if (this.quick) {
      console.log(val);
      val.type.forEach((element) => {
        this.$set(this.item, element, val[element]);
      });
    } else {
      this.item.filterValue = val;
    }
  }

  private get workerList () {
    const arr = (CommonModule as any).publicCache.userList
    return arr.map(item => {
      return {
        name: `${item.agentName}【${item.agentNumber}】`,
        _id: item._id
      }
    });
  }

  private get disabledValue () {
    return [conditionE.isNull, conditionE.isNotNull];
  }

  private get includeInput () {
    return [conditionE.include, conditionE.exclusive];
  }

  private get fieldType () {
    return this.field.fieldType;
  }

  private input (value) {
    if (value === undefined) {
      this.item.filterValue = null;
    } else {
      this.item.filterValue = value;
    }
  }
}
</script>

<style lang="stylus" scoped>
.condition-item {
	margin-bottom 16px !important
	padding-left 16px
	position relative
	/deep/.el-form-item__content {
		display flex
	}
	&:before {
		content ''
		position absolute
		display block
		left 0px
		top 16px
		height 1px
		width 16px
		background-color rgba(0, 0, 0, 0.1)
	}
}
.and {
	position absolute
	left 0
	top 50%
	margin-top -9px
}
.dipalay-item {
	display flex
	flex-grow 1
	overflow hidden
	/deep/.el-form-item__label {
		width 100%
	}
	/deep/.el-range-editor {
		width 100%
	}
	&.empty {
		background-color rgba(0, 0, 0, 0.05)
		border 1px solid rgba(0, 0, 0, 0.1)
		border-radius 4px
		height inherit
	}
}
.disabled-item {
	padding-right 0px !important
}
</style>
